﻿<template>
  <div>
    <el-button type="primary" @click="navigateToCustomize" style="float: right; margin-bottom: 10px; margin-right: 32px">制作开发环境</el-button>
    <div class="card-container" style="clear: both;">
      <div class="card-item" v-for="ides in ideList" :key="ides.id">
        <el-card
          style="max-width: 368px; height: 128px; background-color: rgb(53, 57, 65); color: white; font-family: '等线'; font-size: 12px; padding: 0;"
        >
          <div class="card-content" style="height: 128;">
            <h1 style="margin: 0; font-size: larger;">{{ ides.name }}</h1> <!-- 增大字号 -->
            <div class="content-container" style="height: 128;">
              <p class="description" style="height: 128;">{{ ides.description }}</p>
              <div class="button-container">
                <el-button @click.native="downloadInstaller()" style="margin-bottom: 5px;">下载</el-button>
                <el-button type="primary" @click.native="navigateToCustomizeWithName(ides.name)">制作</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const authToken = localStorage.getItem('authToken');
interface IDE {
  id: number;
  name: string;
  description: string;
}
const ideList = ref<IDE[]>([]);
const fetchIDEsData = async () => {
  try {
    const response = await axios.get(`${window.location.protocol}//${window.location.hostname}/api/ide-data`);
    ideList.value = response.data;
  } catch (error) {
    console.error('Failed to fetch ide data:', error);
  }
};

onMounted(() => {
  fetchIDEsData();
});

async function downloadFile(name: string, description: string) {
  // 
}

async function downloadInstaller() {
  // 暂时下载固定的安装包
  try {
    const response = await axios.get(`${window.location.protocol}//${window.location.hostname}/api/downloadInstaller`, {
      params: {  },
      responseType: 'blob', 
      headers: {
        'Authorization': `Bearer ${authToken}`,  // 在请求头中加入token
      }
    }
    );

    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `DevStar IDE Desktop.exe`); // 设置下载文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } catch (error) {
    console.error('Failed to download file:', error);
  }
}
function navigateToCustomize() {
  router.push('/customize');
}

function navigateToCustomizeWithName(name: string) {
  // 首先推送带有查询参数的路由
  router.push({ path: '/customize', query: { name } }).then(() => {
    // 然后用 router.replace() 替换为没有查询参数的地址
    router.replace({ path: '/customize' });
  });
}
</script>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: flex-start; /* 靠左对齐 */
}

.card-item {
  flex: 0 1 calc(33.33% - 10px); /* 每个卡片占据三分之一宽度，减去间隔 */
  margin-bottom: 10px; /* 卡片间的垂直间隔 */
  margin-right: 10px; /* 卡片间的水平间隔 */
}

.card-item:nth-child(3n) {
  margin-right: 0; /* 每行最后一个卡片不加右边距 */
}

.card-content {
  display: flex;
  flex-direction: column; /* 垂直排列内容 */
  height: 100%; /* 使内容占满卡片高度 */
}

.content-container {
  display: flex; /* 左右排列容器 */
  justify-content: space-between; /* 分开排列 */
  align-items: flex-start; /* 顶部对齐 */
}

.description {
  flex: 1; /* 让描述占据剩余空间 */
  max-height: 100%; /* 限制最大高度 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 省略号处理 */
  white-space: normal; /* 允许换行 */
  margin: 0; /* 去除默认间距 */
}

.button-container {
  display: flex;
  flex-direction: column; /* 按钮上下排列 */
  align-items: flex-end; /* 靠右对齐 */
}
</style>
